<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>酷狗音乐注册页</title>
    <link href="../css/bootstrap.min.css" rel="stylesheet"/>
    <link href="../css/master.css" rel="stylesheet"/>
    <!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="wrap">
       <div id="log_index_top">
          <div class="index-top-content">
             <img src="../img/nav-ad1.png">
             <div class="pull-right">
               <a href="#">注册</a> &nbsp; 
               <a data-toggle="modal" data-target="#myModal">登录</a> | &nbsp;
               <a href="kgshopcart.html"  data-toggle="tooltip" data-placement="bottom" title="购物车中还没有商品，赶紧选购吧"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span></a>  
                  <!-- Modal -->
                  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                    <div class="modal-dialog" role="document">
                      <div class="modal-content">
                        <div class="modal-header">
                          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                          <h4 class="modal-title" id="myModalLabel">登录酷狗音乐</h4>
                        </div>
                        <div class="modal-body">
                         <form>
                            <div class="form-group">
                              <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
                              <div class="input-group">
                                <div class="input-group-addon">账号：</div>
                                <input type="text" class="form-control" id="exampleInputAmount" >
                              </div>
                              <div class="input-group">
                                <div class="input-group-addon">密码：</div>
                                <input type="text" class="form-control" id="exampleInputAmount">
                              </div>                            
                            </div>
                            <div class="checkbox">
                                  <label>
                                    <input type="checkbox"/> 下次自动登陆
                                  </label>
                                  <span class="pull-right"><a>忘记密码 </a> &nbsp; <a> 立即注册</a></span>
                            </div>
                          </form>
                        </div>
                        <div class="modal-footer">
                          <button type="button" class="btn btn-primary btn-block">登录</button>
                          <p class="pull-left">其他登录方式<img src="../img/anotherregis.png"></p>
                        </div>
                      </div>
                    </div>
                  </div><!-- Moda结束 -->
             </div>
          </div><!--index-top-content结束-->
          <nav class="index_nav navbar">
              <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                  </button>
                  <a class="navbar-brand" href="#"><img src="../img/kg-log.png"></a>
                </div>
                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                  <ul class="nav navbar-nav">
                    <li><a href="kgshop.html">酷狗商城<span class="sr-only">(current)</span></a></li>
                    <li><a href="#">下载客户端</a></li>
                    <li><a href="#">娱乐资讯</a></li>
                    <li><a href="#">音乐直播</a></li>
                    <li><a href="#">酷狗音乐人</a></li>
                    <li class="pull-right"><a href="#">客服中心</a></li>
                    <li class="pull-right"><a href="#">VIP中心</a></li>                    
                    <li class="pull-right"><a href="#">产品中心</a></li>
                  </ul>
                </div><!-- /.navbar-collapse -->
              </div><!-- /.container-fluid -->
          </nav>
       </div>
       <div id="log_index_main">
          <ul class="nav nav-tabs row" role="tablist">
            <li role="presentation" class="active col-md-4">
              <a href="#mail_regist" aria-controls="mail_regist" role="tab" data-toggle="tab">邮箱注册</a>
            </li>
            <li role="presentation" class="col-md-4">
              <a href="#phone_rgiste" aria-controls="phone_rgiste" role="tab" data-toggle="tab">手机注册</a>
            </li>
            <li role="presentation" class="col-md-4">
              <a href="#name_registe" aria-controls="name_registe" role="tab" data-toggle="tab">用户名注册</a>
            </li>
          </ul>
          <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="mail_regist">
               <form class="form-horizontal">
                  <div class="form-group">
                    <label for="inputEmail1" class="col-sm-3 control-label">* 邮箱：</label>
                    <div class="col-sm-9">
                      <input type="email" name="email" class="form-control" id="inputEmail1">
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="Password" class="col-sm-3 control-label">* 密码：</label>
                    <div class="col-sm-9">
                      <input type="password" name="password" class="form-control" id="Password">
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="confirm_password" class="col-sm-3 control-label">* 确认密码：</label>
                    <div class="col-sm-9">
                      <input type="password" name="confirm_password" class="form-control" id="confirm_password">
                    </div>
                  </div>
                  <div class="form-group" style="margin-bottom:0;color:#ccc">
                    <div class="col-sm-offset-3 col-sm-9">密码强度  弱
                       <a class="btn btn-default btn-lg disabled" role="button"></a>
                       <a class="btn btn-default btn-lg disabled" role="button"></a>
                        <a class="btn btn-default btn-lg disabled" role="button"></a> 强
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="radio" class="col-sm-3 control-label">* 性别：</label>
                    <div class="col-sm-6 line-hgt">
                      <input type="radio" name="male" id="radio1">男&nbsp;&nbsp;
                      <input type="radio" name="male" id="radio2">女
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="inputPassword2" class="col-sm-3 control-label">* 验证码：</label>
                    <div class="col-sm-5">
                      <input type="text" class="form-control">
                    </div>
                    <div class="col-sm-2">
                       <img src="../img/yanzheng1.png"/>
                    </div>
                    <div class="col-sm-2" style="line-height:34px">
                      <a href="#">换一换</a>
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-sm-offset-3 col-sm-9">
                      <div class="checkbox">
                        <label>
                          <input type="checkbox" checked="true"> 我已经认真阅读并同意 <a href="#">《酷狗服务条款》</a>
                        </label>
                      </div>
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-sm-offset-3 col-sm-4">
                      <button type="submit" class="btn  btn-lg btn-info">注册</button>
                    </div>
                  </div>
                </form>
            </div>
            <div role="tabpanel" class="tab-pane" id="phone_rgiste">
               <form class="form-horizontal">
                  <div class="form-group">
                    <label for="inputphone" class="col-sm-3 control-label">* 手机号码：</label>
                    <div class="col-sm-9">
                      <input type="text" class="form-control" id="inputphone" name="inputphone">
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="" class="col-sm-3 control-label">* 短信验证：</label>
                    <div class="col-sm-9">
                      <input type="text" class="form-control" id="">
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="inputPassword1" class="col-sm-3 control-label">* 密码：</label>
                    <div class="col-sm-9">
                      <input type="password" class="form-control" id="inputPassword1">
                    </div>
                  </div>
                  <div class="form-group" style="margin-bottom:0;color:#ccc">
                    <div class="col-sm-offset-3 col-sm-9">密码强度  弱
                       <a class="btn btn-default btn-lg disabled" role="button"></a>
                       <a class="btn btn-default btn-lg disabled" role="button"></a>
                        <a class="btn btn-default btn-lg disabled" role="button"></a> 强
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="inputPassword2" class="col-sm-3 control-label">* 确认密码：</label>
                    <div class="col-sm-9">
                      <input type="password" class="form-control" id="inputPassword2">
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="radio" class="col-sm-3 control-label">* 性别：</label>
                    <div class="col-sm-6 line-hgt">
                      <input type="radio" name="male" id="radio1">男&nbsp;&nbsp;
                      <input type="radio" name="male" id="radio2">女
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-sm-offset-3 col-sm-9">
                      <div class="checkbox">
                        <label>
                          <input type="checkbox" checked="true"> 我已经认真阅读并同意 <a href="#">《酷狗服务条款》</a>
                        </label>
                      </div>
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-sm-offset-3 col-sm-4">
                      <button type="submit" class="btn  btn-lg btn-info">注册</button>
                    </div>
                  </div>
                </form>
            </div>
            <div role="tabpanel" class="tab-pane" id="name_registe">
                  <form class="form-horizontal">
                  <div class="form-group">
                    <label for="inputEmail2" class="col-sm-3 control-label">* 邮箱：</label>
                    <div class="col-sm-9">
                      <input type="email" class="form-control" id="inputEmail2">
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="inputPassword2" class="col-sm-3 control-label">* 密码：</label>
                    <div class="col-sm-9">
                      <input type="password" class="form-control" id="inputPassword2">
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="inputPassword3" class="col-sm-3 control-label">* 确认密码：</label>
                    <div class="col-sm-9">
                      <input type="password" class="form-control" id="inputPassword3">
                    </div>
                  </div>
                  <div class="form-group" style="margin-bottom:0;color:#ccc">
                    <div class="col-sm-offset-3 col-sm-9">密码强度  弱
                       <a class="btn btn-default btn-lg disabled" role="button"></a>
                       <a class="btn btn-default btn-lg disabled" role="button"></a>
                        <a class="btn btn-default btn-lg disabled" role="button"></a> 强
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="radio" class="col-sm-3 control-label">* 性别：</label>
                    <div class="col-sm-6 line-hgt">
                      <input type="radio" name="male" id="radio3">男&nbsp;&nbsp;
                      <input type="radio" name="male" id="radio4">女
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="" class="col-sm-3 control-label">* 验证码：</label>
                    <div class="col-sm-5">
                      <input type="text" class="form-control" id="">
                    </div>
                    <div class="col-sm-2">
                       <img src="../img/yanzheng1.png"/>
                    </div>
                    <div class="col-sm-2" style="line-height:34px">
                      <a href="#">换一换</a>
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-sm-offset-3 col-sm-9">
                      <div class="checkbox">
                        <label>
                          <input type="checkbox" checked="true"> 我已经认真阅读并同意 <a href="#">《酷狗服务条款》</a>
                        </label>
                      </div>
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-sm-offset-3 col-sm-4">
                      <button type="submit" class="btn  btn-lg btn-info">注册</button>
                    </div>
                  </div>
                </form>
            </div>
          </div>
       </div>
       <div id="log_index_foot">
        <div class="log_foot-link">
          <a href="#">关于酷狗 |</a>
          <a href="#"> 广告服务 |</a>
          <a href="#"> 版权指引|</a>
          <a href="#"> 用户服务协议 |</a>
          <a href="#"> 推广合作 |</a>
          <a href="#"> 酷狗音乐人 |</a>
          <a href="#">酷狗音乐推 |</a>
          <a href="#">招聘信息 |</a>
          <a href="#"> 客服中心 |</a>
          <a href="#"> 用户体验 |</a>
          <a href="#">提升计划</a>
        </div>
        <div class="log_foot_text">
          <p>我们致力于推动网络正版音乐发展，相关版权合作请联系copyrights@kugou.com<br/>
             信息网络传播视听节目许可证 1910564 增值电信业务经营许可证粤B2-20060339  &nbsp;  粤ICP备09017694号-2   <br/> 
             广播电视节目制作经营许可证（粤）字第01270号  &nbsp;  营业性演出许可证穗天演440106026  &nbsp;  穗公网监备案证第44010650010167<br/>
             Copyright  ©  2004-2016 KuGou-Inc.All Rights Reserved<img src="../img/fotlog.png">
          </p>
          <img src="../img/fotbiglog.png" class="fotbig-log">
        </div>
      </div>
      <div class="retrun_top"><a href="#log_index_top"><span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span>返回顶部</a></div>
    </div>
    <script src="../js/jquery-2.1.0.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../js/jquery.validate.js"></script>
    <script type="text/javascript">
         $(function(){
            $(".navbar-collapse .navbar-nav li a").click(function(){
                $(this).css("background-color","#008ad4")
            });
            
         
            $(".form-horizontal").validate({
                rules: {
                  username: {
                    required: true,
                    minlength: 3
                  },
                  inputphone:{
                    required:true,
                    minlength:6
                  },
                  password: {
                    required: true,
                    minlength: 5
                  },
                  confirm_password: {
                    required: true,
                    minlength: 5,
                    equalTo: "#Password"
                  },
                  email: {
                    required: true,
                    email: true
                  },
                  male:{
                    required: true
                  },
                  topic: {
                    required: "#newsletter:checked",
                    minlength: 2
                  },
                  agree: "required"
                },
                messages: {
                  username: {
                    required: "请输入用户名",
                    minlength: "用户名最少为3位"
                  },
                  inputphone:{
                    required: "请输入手机号",
                    minlength: "号码格式不对"
                  },
                  password: {
                    required: "请输入密码",
                    minlength: "密码最少为5位"
                  },
                  confirm_password: {
                    required: "请输入密码",
                    minlength: "密码最少为5位",
                    equalTo: "请输入相同密码"
                  },
                  email: "请输入有效的邮箱",
                  agree: "请选择接受我们的协议"
                }
              });

            // $("#myModal .modal-body .form-control").click(function(){
            //     $(this).css({"border":"1px solid #ccc","border-left":"none"})
            // });


         })
    </script>
  </body>
</html>